{% block sw_cms_element_image_config %}
<div class="sw-cms-el-config-image">
    <sw-cms-inherit-wrapper
        field="media"
        :element="element"
        :label="$t('sw-cms.elements.image.label')"
    >
        <template #default="{ isInherited }">
            {% block sw_cms_element_image_config_media_upload %}
            <sw-cms-mapping-field
                v-model:config="element.config.media"
                value-types="entity"
                entity="media"
                :disabled="isInherited"
            >
                <sw-media-upload-v2
                    variant="regular"
                    :upload-tag="uploadTag"
                    :source="previewSource"
                    :allow-multi-select="false"
                    :default-folder="cmsPageState.pageEntityName"
                    :caption="$t('sw-cms.elements.general.config.caption.mediaUpload')"
                    :disabled="isInherited"
                    @media-upload-sidebar-open="onOpenMediaModal"
                    @media-upload-remove-image="onImageRemove"
                />

                <template #preview="{ demoValue }">
                    <div class="sw-cms-el-config-image__mapping-preview">
                        <img
                            v-if="demoValue.url"
                            :src="demoValue.url"
                            alt=""
                        >
                        <mt-banner
                            v-else
                            class="sw-cms-el-config-image__preview-info"
                            variant="info"
                        >
                            {{ $t('sw-cms.detail.label.mappingEmptyPreview') }}
                        </mt-banner>
                    </div>
                </template>
            </sw-cms-mapping-field>

            <sw-upload-listener
                :upload-tag="uploadTag"
                auto-upload
                @media-upload-finish="onImageUpload"
            />
            {% endblock %}

            {% block sw_cms_element_image_config_media_modal %}
            <sw-media-modal-v2
                v-if="mediaModalIsOpen"
                variant="full"
                :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
                :entity-context="cmsPageState.entityName"
                :allow-multi-select="false"
                :initial-folder-id="cmsPageState.defaultMediaFolderId"
                @media-upload-remove-image="onImageRemove"
                @media-modal-selection-change="onSelectionChanges"
                @modal-close="onCloseModal"
            />
            {% endblock %}
        </template>
    </sw-cms-inherit-wrapper>

    {% block sw_cms_element_image_config_display_mode %}
    <sw-cms-inherit-wrapper
        field="displayMode"
        :element="element"
        :label="$t('sw-cms.elements.general.config.label.displayMode')"
    >
        <template #default="{ isInherited }">
            <mt-select
                v-model:model-value="element.config.displayMode.value"
                class="sw-cms-el-config-image__display-mode"
                :help-text="$t('sw-cms.elements.general.config.helpText.displayMode')"
                :options="displayModeOptions"
                :disabled="isInherited"
                @update:model-value="emitUpdate"
            />
        </template>
    </sw-cms-inherit-wrapper>
    {% endblock %}

    <template v-if="element.config.displayMode.value === 'cover'">
        {% block sw_cms_element_image_config_min_height %}
        <sw-cms-inherit-wrapper
            field="minHeight"
            :element="element"
            :label="$t('sw-cms.elements.image.config.label.minHeight')"
            @update:value="onChangeMinHeight"
        >
            <template #default="{ isInherited }">
                <mt-text-field
                    v-model:model-value="element.config.minHeight.value"
                    :placeholder="$t('sw-cms.elements.image.config.placeholder.enterMinHeight')"
                    :disabled="isInherited"
                />
            </template>
        </sw-cms-inherit-wrapper>
        {% endblock %}
    </template>

    {% block sw_cms_element_image_config_vertical_align %}
    <sw-cms-inherit-wrapper
        field="verticalAlign"
        :element="element"
        :label="$t('sw-cms.elements.general.config.label.verticalAlign')"
    >
        <template #default="{ isInherited }">
            <mt-select
                v-model:model-value="element.config.verticalAlign.value"
                :placeholder="$t('sw-cms.elements.general.config.label.verticalAlign')"
                :disabled="isInherited || ['cover'].includes(element.config.displayMode.value)"
                :options="verticalAlignOptions"
            />
        </template>
    </sw-cms-inherit-wrapper>
    {% endblock %}

    {% block sw_cms_element_image_config_horizontal_align %}
    <sw-cms-inherit-wrapper
        field="horizontalAlign"
        :element="element"
        :label="$t('sw-cms.elements.general.config.label.horizontalAlign')"
    >
        <template #default="{ isInherited }">
            <mt-select
                v-model:model-value="element.config.horizontalAlign.value"
                :placeholder="$tc('sw-cms.elements.general.config.label.horizontalAlign')"
                :disabled="isInherited || element.config.displayMode.value === 'cover'"
                :options="horizontalAlignOptions"
            />
        </template>
    </sw-cms-inherit-wrapper>
    {% endblock %}

    <sw-container
        columns="1fr 1fr"
        gap="0px 30px"
    >
        <sw-cms-inherit-wrapper
            field="isDecorative"
            :element="element"
            :label="$t('sw-cms.elements.image.config.label.isDecorative')"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.isDecorative.value"
                    class="sw-cms-el-config-image__is-decorative"
                    :disabled="isInherited"
                    @update:model-value="onChangeIsDecorative"
                />
            </template>
        </sw-cms-inherit-wrapper>

        <sw-cms-inherit-wrapper
            field="fetchPriorityHigh"
            :element="element"
            :label="$t('sw-cms.elements.image.config.label.fetchPriorityHigh')"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model="element.config.fetchPriorityHigh.value"
                    :help-text="$t('sw-cms.elements.image.config.helpText.fetchPriorityHigh')"
                    :disabled="isInherited"
                />
            </template>
        </sw-cms-inherit-wrapper>
    </sw-container>

    {% block sw_cms_element_image_config_link %}
    <div class="sw-cms-el-config-image__link">
        <sw-cms-inherit-wrapper
            field="url"
            :element="element"
        >
            <template #default="{ isInherited }">
                <sw-dynamic-url-field
                    v-model:value="element.config.url.value"
                    :disabled="isInherited"
                />
            </template>
        </sw-cms-inherit-wrapper>

        <sw-cms-inherit-wrapper
            field="ariaLabel"
            :element="element"
            :label="$t('sw-cms.elements.image.config.label.ariaLabel')"
        >
            <template #default="{ isInherited }">
                <mt-text-field
                    v-model="element.config.ariaLabel.value"
                    class="sw-cms-el-config-image__link-aria-label"
                    :help-text="$tc('sw-cms.elements.image.config.label.ariaLabelHelpText')"
                    :disabled="isInherited"
                />
            </template>
        </sw-cms-inherit-wrapper>

        <sw-cms-inherit-wrapper
            field="newTab"
            :element="element"
            :label="$t('sw-cms.elements.image.config.label.linkNewTab')"
        >
            <template #default="{ isInherited }">
                <mt-switch
                    v-model:model-value="element.config.newTab.value"
                    class="sw-cms-el-config-image__link-tab"
                    :disabled="isInherited"
                />
            </template>
        </sw-cms-inherit-wrapper>
    </div>
    {% endblock %}
</div>
{% endblock %}
